<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css_vertical-align属性</title>
    <style>
        #szm {
            font-size: 80px;
            background-color: orange;
            width: 1000px;
            height: 300px;
            line-height: 100px;
        }
        span{
            font-size: 40px;
            background-color: red;
            line-height: 50px;
            vertical-align: middle;
        }
        table{
            width: 500px;
            height: 500px;
        }
        .id{
            vertical-align: middle;
        }
    </style>
</head>
<body>

<!--
    vertical-align: 属性
        作用：用于指定同一行元素之间的，或者表格单元格内文字的对齐方式
        常用值：
            1.baseline(默认值)：使元素的基线与父元素的基线对齐
            2.top:使元素的顶部与所在行的顶部对齐
            3.middle:使元素的中部与父元素的基线加上父元素字母x的一半高度对齐
            4.bottom:使元素的底部与所在行的底部对齐
            注意vertical-align属性不能控制块级元素。
-->


<div id="szm">English英语x<span>xEnglish英语</span></div>


<table border="1">
    <caption>员工表</caption>
    <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="id">1</td>
            <td>张三</td>
            <td>18</td>
            <td>女</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>20</td>
            <td>男</td>
        </tr>
        <tr>
            <td>3</td>
            <td>王五</td>
            <td>22</td>
            <td>男</td>
        </tr>
    </tbody>
</table>


</body>
</html>